Embedding HD Quality Screencasts in Your Blog
If you've ever uploaded a screencast into a video sharing site, such as Youtube, you'll notice that the screen quality is poor. Screencasts require a high degree of clarity to be watchable. For example, here's a screencast I uploaded to Youtube. It's hard to see what's going on.
Other video sharing sites have the same problem. Here's the same video on Viddler.
And here's the same video on Vimeo.
[vimeo 3140858]
Unlike the other video sharing sites, Vimeo also provides an HD version. At first I was excited about Vimeo, because the HD version is pretty clear in the compressed form. To see what I'm talking about, watch this same video on Vimeo's site.
Pretty clear, right?
Now, here's the catch. To embed the HD version of the video on your own site, you have to upgrade to Vimeo Plus for $59.95 a year. Then you only get 5,000 embedded plays, which means only 5,000 people can watch the HD video embedded onto your site, or one user can watch it 5,000 times. You can buy more embedded plays for more money. For example, you can buy 100,000 embedded plays for $199, which isn't that much. But still, the costs start to add up. This is already about $260 -- each year.
And of course if you're embedding HD video, you'll need an HD camcorder, which is another $600 (for a low-end version).
Even if you go to all this trouble, the HD embedded screencasts you post on your blog might not be so viewable at a width of 550 pixels, which is about my blog's post width. The text will be miniature, and users will want to expand it anyway. To make it viewable at this width, you'll probably end up relying on the pan and zoom features in Camtasia Studio. As soon as you start adding in the pan and zooms and other post-production processing, creating that simple screencast jumped from about a 5 minute operation to an hour. After a few screencasts, you'll tell yourself you don't have time for screencasting.
There's a much better way to create screencasts: Jing and Screencast.com.
Here's a sample screencast embedded with Jing.
In the compressed form, the text is hard to see, similar to the other video players. However, if you click the expand button (see image below), the player expands to show perfect pixel clarity, unlike the other video services. It also darkens the background, giving you more of a movie-viewing experience.
Brooks Andrus, one of the Jing developers, created a tutorial on how to embed Jing videos into WordPress blogs. You have to change a few parameters in the default screencast.com embed code to make it play in WordPress, but it only takes 10 seconds to change this. (It's a bug they're fixing.)
With both Jing Pro and Camtasia Studio, you can also capture HD quality screencasts. Just record a dimension of at least 1280 x 720 pixels. If you increase that size, maintain the same 4:3 aspect ratio. Choose the MPEG4 output (only available in Jing Pro). In both Jing Pro and Camtasia, the video output will be encoded with the H.264 codec. If you were to upload such a video to Vimeo, or embed it with the Jing wrapper as I explained above, the video would appear in HD quality.
You don't have to use Screencast.com with Jing. Brooks also shows you how to FTP the video to your own site and embed the screencast with the Kimili flash embed plugin. This solution is useful if you want to maintain tighter control over your content.
I've been experimenting with Vimeo and other video-sharing services for the past couple of days. Overall, I'm pretty sold on the Jing/Screencast.com solution (or the Jing wrapper solution), for the reasons I explained in this post (cost, clarity, screen real estate). Jing and Screencast.com are also in their development infancy, so who knows, they may be working on more HD features similar to Vimeo right now anyway.
Do you agree with my analysis of screencasting solutions ? Are you embedding screencasts a different way? I'd like to hear your thoughts.
About Tom Johnson
I'm an API technical writer based in the Seattle area. On this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, AI, information architecture, content strategy, writing processes, plain language, tech comm careers, and more. Check out my API documentation course if you're looking for more info about documenting APIs. Or see my posts on AI and AI course section for more on the latest in AI and tech comm.
If you're a technical writer and want to keep on top of the latest trends in the tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.
If you need a software to record your computer screen but don't want to pay for it, you should try Screenr! It is a very neat application and most importantly its free!!!
I found online course about (recording a screencast | creating online videos | screencasting) using screenr, if anyone’s been wondering what’s one of the best ways to screencast, then check out the new training series on www.youtube.com/mycsula.
Thanks for the tip on the new software.
Hi and thanks a lot for this post.
One question though... Does Screencast.com embedding display Web 2.0 buttons like 'share this video... on Twitter, Delicious, etc?
Hmm, I don't think so, but now that I think of it, I'm not sure. I think you can just upload your Jing videos to youtube for those options. That's what I would do instead of using screencast.com
This is a great post! I have a question. I have been able to use Jing and Screencaster to embed my video, and the quality is great...
However, Once I scale down my video to fit in my layout the video control buttons along the bottom are very small since they scale also (The play button, full screen button, etc become too small for people to easily see and be able to use)
In your example the video is scaled down but the controls are still big. How can I do this?
Thanks again for the great post!
I like using both YouTube and the Internet Archive for uploading my screencasts. Youtube for discoverability and the Internet Archive for free hosting of media files at any file size.
For example, here is a recent screencast of mine:
http://www.youtube.com/watc...
(click on HQ to see this screencast large size)
and on the Internet Archive as a 100 MB QuickTime file
I'm starting a video screencast blog to teach HTML and web coding skills. I'm using amazon's S3 service to host my videos (in case I get a large amount of traffic some day). I'm on a mac and purchase a license for ScreenFlow... which is great! I embed the videos with the longtail flash video embedder (which allows me to easily embed their ad network in my videos for income).
The part I'm stuck on is deciding what size to record the videos in... and what is the best way to export them to a nice high quality format. I want FLV so anyone can view the videos without special plugins... but deciding the width and height in pixels and resizing/exporting to a nice resolution.
Nice article. I got a lot from it... I wish there was more information out there about recording and producing screencasts.
Ben, for HD you need to record in 1280 x 720 pixels. Then when you embed it, try embedding at half that size, keeping the proportions. Did you search my site for other info I've written on HD videos? If not, do that.
This was a really useful post with sufficient detail to make me want to sign up after checking it out. I went for the Prp version. I liked that you neither simplified nor overhyped what Jing can do.
nice post, i didn't know there was a place to have HD screencasts, so this is an eyeopener for me, i can imagine all the problems with screen sizes and bandwidth, but for important videos it could be worth it.
By the way, I didn't mention this in the post, but Youtube is also offering higher quality videos, similar (but not exactly) HD. If you click the Youtube link that I pasted above, you'll see the high quality version (it only plays on Youtube's site). Apparently the high quality format is experimental or beta. You can't automatically make the videos you upload look high quality. Youtube chooses. However, if you add fmt=18 after the youtube video address, you can see the high quality.
Here's a post with more information on Youtube and the high quality.
Even with the high quality, the screencasts are still unwatchable. I haven't even mentioned the larger problem with HD formats -- file size. If you're on a slow bandwidth, it doesn't stream seamlessly. I'm on 5MB down and 2MB up broadband, and the high quality version constantly stops to buffer or catch up.